<template>
  <div class="goods-one-box">
    <goods-top-box>
      <template v-slot:left-one>
        <div>智能硬件</div>
      </template>
      <template v-slot:right-one>
        <div @mouseenter="getMouseEvents(true,index)" @mouseleave="getMouseEvents(false,index)" ref="rightMessage"
             v-for="(item,index) in oneGoodsTopBoxRight">
          {{ item }}
          <svg class="icon" aria-hidden="true">
            <use :xlink:href="symbolOne[index]"></use>
          </svg>
        </div>
      </template>
    </goods-top-box>
    <goods-image-box>
      <template v-slot:leftImage>
        <a v-for="item in biggerImage" :href="item.href">
          <img class="biggerMessage" :src="item.src" alt="">
        </a>
      </template>
      <template v-slot:rightImage>
        <div class="box-right">
          <ul class="box-list">
            <li class="box-item" v-for="good in imageOneGroup">
              <span class="discount-label"
                    :class="good.discountType">{{ good.discount }}</span>
              <a :href="good.sourceUrl" target="_blank">
                <img :src="good.imgUrl" alt=""/>
                <h3 class="box-title">{{ good.title }}</h3>
              </a>
              <p class="box-desc">
                {{ good.desc }}
              </p>
              <p class="box-price">
                {{ good.price }}元
                <template v-if="good.discountType === 'discount'">
                  <span class="old-price">
                    {{ good.oldPrice }}元
                  </span>
                </template>
              </p>
            </li>
          </ul>
        </div>
      </template>
    </goods-image-box>
  </div>
</template>

<script>
import '@/assets/font/arrow/arrow'
import GoodsTopBox from "@/components/Mi/Common/GoodsTopBox";
import GoodsImageBox from "@/components/Mi/Common/GoodsImageBox";

export default {
  components: {
    GoodsTopBox,
    GoodsImageBox,
  },
  name: "GoodsOne",
  data() {
    return {
      
      oneGoodsTopBoxRight: ['查看全部'],
      symbolOne: ['#icon-right'],
      imageOneGroup: [],
      biggerImage: [],
    }
  },
  created() {
    
    this.getGoodsOneImage()
  },
  methods: {
    
    async getGoodsOneImage() {
      const {data: res} = await this.$http.get('imageonegroup')
      this.imageOneGroup = res.goods
      this.biggerImage = res.biggerImage
      console.log(this.imageOneGroup)
      console.log(this.biggerImage)
    },
    getMouseEvents(flag, index) {//goods右侧信息变色
      let mouseEvents = this.$refs.rightMessage[index]
      console.log(mouseEvents)
      if (flag === true) {
        mouseEvents.setAttribute('style', 'color: #ED702F;')
      } else {
        mouseEvents.setAttribute('style', '')
      }
    },
    
  },
}
</script>

<style scoped lang="less">
.biggerMessage {
  float: left;
  width: 234px;
  height: 614px;
  cursor: pointer;
  transition: all 0.3s;
  
  &:hover {
    transform: translateY(-1px);
    box-shadow: 5px 5px 20px #ccc;
  }
}

.box-right {
  float: left;
  width: 992px;
  height: 628px;
  
  .box-list {
    display: flex;
    flex-flow: row wrap;
    justify-content: flex-start;
    width: 100%;
    height: 100%;
    background: #f5f5f5;
  }
  
  .box-item {
    position: relative;
    margin: 0 0 14px 14px;
    padding: 20px 0;
    width: 234px;
    height: 300px;
    background: #fff;
    transition: all 0.3s;
    
    &:hover {
      transform: translateY(-1px);
      box-shadow: 5px 5px 20px #ccc;
    }
    
    .discount-label {
      position: absolute;
      top: 0;
      left: 50%;
      width: 64px;
      height: 20px;
      line-height: 20px;
      margin-left: -32px;
      font-size: 12px;
      text-align: center;
      color: #fff;
      z-index: 4;
      
      &.free {
        background-color: #ffac13;
      }
      
      &.new {
        background-color: #83c44e;
      }
      
      &.discount {
        background-color: #e53935;
      }
    }
    
    .old-price {
      color: #b0b0b0;
      text-decoration: line-through;
    }
    
    img {
      display: block;
      width: 160px;
      height: 160px;
      margin: 0 auto;
    }
    
    .box-title {
      font-size: 14px;
      text-align: center;
      color: #333;
      font-weight: normal;
    }
    
    .box-desc {
      margin: 0 10px 10px;
      height: 18px;
      font-size: 12px;
      text-align: center;
      text-overflow: ellipsis;
      white-space: nowrap;
      overflow: hidden;
      color: #b0b0b0;
    }
    
    .box-price {
      color: #ff6700;
      font-size: 14px;
      text-align: center;
    }
  }
}
</style>
